<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-for="item of oneMaterielData" :key="item.fid" :label="item.fname" :name="item.fid + ''">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance" />
          <el-button type="primary" class="btn" size="mini" @click="balance">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          v-loadmore="loadmore"
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="400px"
        />
        <el-tabs v-model="activeName1" type="card" style="margin-top: 5px">
          <el-tab-pane label="餐桌" name="first" />
          <el-tab-pane label="餐椅" name="second" />
          <el-tab-pane label="长凳" name="third" />
        </el-tabs>
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="balance"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { queryRealTimeDataBalance } from '@/api/homePage/business'

export default {
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      ftype: 0,
      tableData: [],
      tableHeader: [
        { label: this.$t('market.fdate'), prop: 'fdata' },
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecificaTion' },
        { label: this.$t('market.fqty'), prop: 'fqty' },
        { label: this.$t('market.stock2'), prop: 'fstock' },
        { label: this.$t('market.paezText1'), prop: 'salKhddh' }
      ],
      oneMaterielData: [
        { fname: '销售', fid: 0 },
        { fname: '材料', fid: 1 },
        { fname: '退税', fid: 2 }
      ],
      activeName: '',
      activeName1: '',
      currentPage: 1,
      size: 200,
      total: 0
    }
  },
  watch: {
    // 监听切换选项卡
    activeName(val) {
      this.tableData = []
      this.LargeCode = val
      // this.balance()
    }
  },
  created() {
    this.balance()
  },
  methods: {
    loadmore() {
      this.currentPage++
      this.balance()
    },
    // 仓库原材料实时数据结存表
    balance() {
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        search: this.searCollData,
        fnumber: this.LargeCode
      }
      queryRealTimeDataBalance(DATA).then(res => {
        if (res.code === 0) {
          this.tableData.push(...res.data.array)
          this.total = res.data.total
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.header-name {
  position: relative;
  top: -5px;
  margin-bottom: 10px;
  .btn {
    margin-left: 450px;
    transform: translateY(18%);
  }
}
</style>

